<!DOCTYPE html>
<html>
<head>
    <title>维护项</title>
    #parse("sys/header.html")
</head>
<body>
<div id="rrapp" v-cloak>
    <Card>
        <Tabs type="card" value="record0">
            <Tab-pane label="维护项" name="record0" style="padding: 5px">
                <Row>
                    <div class="buttons-group">
                        <i-button type="info" @click="end"><i class="fa fa-plus"></i>&nbsp;完成</i-button>
                        #if($shiro.hasPermission("devplangc:modifyLiveImage"))
                        <i-button type="info" @click="upPhoto"> <Icon type="images"></Icon>&nbsp;现场照片修正 </i-button>
                        #end
                    </div>
                </Row>
                <table id="jqGrid"></table>
            </Tab-pane>
        </Tabs>
    </Card>
    <Modal v-model="liveImageModal" title="维护现场照片列表" width="960">
        <Row>
            <i-col span="6" v-for="liveImage in liveImageList" style="margin-right: 2px">
                <image :src="liveImage" style="width: 100%" @click="preview(liveImage)"/>
            </i-col>
        </Row>
    </Modal>
    <!--现场维护照片 model-->
    <Modal v-model="imageModal1" title="现场照片修正" @on-ok="ok" @on-cancel="cancel" >
        <div>
            <Upload
                    ref="upload"
                    action=""
                    multiple
                    :before-upload="handleUpload"
                    type="drag"
                    :format="['jpg','jpeg','png']"
                    :show-upload-list="false"
            >
                <div style="padding: 20px 0">
                    <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
                    <p>点击或将现场图片拖拽到这里上传</p>
                    <p>支持.jpg .jpeg .png </p>
                </div>
            </Upload>
            <!--文件显示区域-->
            <div style="padding: 2px 2px 0px 2px">
                <ul v-for="(list,index) in formData.liveImages" :key="index">
                    <li class="divs">
                        <div style="display: flex">
                            <div style="flex-basis: 90%">
                                文件名：{{list.name}}
                            </div>
                            <div style="flex-basis: 10%">
                                <span style="justify-content: flex-end;display: flex"><i class="fa fa-trash-o" @click="deletePhoto(index)"></i></span>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </Modal>
</div>
<script>
    var id = getQueryString("id");
    $(function () {
        $("#jqGrid").Grid({
            url: ' ../devplangc/planTicketItems?ticketId=' + id,
            colModel: [
                {label: '选项名称', name: 'NAME', width: 70},
                {label: '维护内容', name: 'CHECK_CONTENT'},
                {label: '维护标准', name: 'CHECK_ST'},
                {label: '物料需求', name: 'MATERIAL_REQU', width: 90},
                {label: '方法手段', name: 'METHOD_TYPE', width: 90},
                {
                    label: '执行状态', width: '60',
                    formatter: function (value, col, row) {
                        return sysEnums.TICKET_STATUS[row.STATUS];
                    }
                },
                {
                    label: '是否异常', width: '60',
                    formatter: function (value, col, row) {
                        return sysEnums.TICKET_CHECK_RESULT[row.CHECK_RESULT];
                    }
                },
                {label: '实施人', name: 'NICK_NAME', width: 90},
                {
                    label: '实施时间', name: 'IMPLEMENT_DATE', width: 90,
                    formatter: function (value, options, row) {
                        return transDate(value, "yyyy-MM-dd hh:mm");
                    }
                },
                {
                    label: '现场照片', sortable: false, width: 60,
                    formatter: function (value, col, row) {
                        return "<button class='btn btn-outline btn-info' id='showText' onclick='vm.loadMaintenanceTicketLiveImage(\"" + row.ID + "\")'>&nbsp;<i class='fa fa-file-text-o'></i></button>";
                    }
                },
                {name: 'ID', key: true, hidden: true},
                {name: 'STATUS', hidden: true}
            ]
        });
    });
    var vm = new Vue({
        el: '#rrapp',
        data: {
            liveImageList: [], // 维护工单现场照片列表
            liveImageModal: false,// 是否展示维护工单现场照片
            imageModal1: false,//是否更新现场照片
            formData: {
                pmTicketItemId: '',//维护维修工单id
                module: 'device',
                subModule: 'pm',
                liveImages: []
            },//表单数据
        },
        methods: {
            preview: function (url) {
                if (url) {
                    window.open(url, '_blank');
                } else {
                    alert('还未上传文件');
                }
            },
            /*删除图片*/
            deletePhoto(Index) {
                const that = this;
                confirm('是否删除选中数据？', function () {
                    that.formData.liveImages.splice(Index, 1)
                    alert('操作成功！')
                })
            },
            ok() {
                const formData = new FormData();
                let form = vm.formData;
                form.liveImages.map(file => {
                    formData.append("liveImages", file); // 文件对象
                })
                //添加自定义参数
                formData.append('pmTicketItemId', vm.formData.pmTicketItemId)
                formData.append('module', 'device')
                formData.append('subModule', 'pm')
                confirm('确定完成选中的记录？', function () {
                    if (vm.formData.liveImages.length > 0) {
                        $.ajax({
                            url: '../devplangc/temTicketItems/modifyLiveImage',
                            type: 'POST',
                            data: formData,
                            contentType: false,
                            processData: false,
                            success: function (res) {
                                vm.formData.liveImages = [];
                                vm.imageModal1 = false;
                                alert('操作成功', function (index) {
                                    layer.closeAll();
                                    vm.reload();
                                });
                            }
                        })
                    }
                });
            },
            cancel() {
                this.imageModal1 = false;
                this.formData.liveImages = [];
            },
            preview: function (url) {
                if (url) {
                    window.open(url, '_blank');
                } else {
                    alert('还未上传文件');
                }
            },
            //上传之前效验有几个文件了
            handleUpload: function (file) {
                let type = (file.name.substr(file.name.lastIndexOf("."))).toLowerCase(); // .jpg
                let imgType = type.split('.')[1] // jpg
                let imgFileTypeArr = ['jpg', 'jpeg', 'png']
                let checkType = imgFileTypeArr.some((item) => {
                    return item === imgType
                })
                if (!checkType) {
                    this.$Notice.warning({
                        title: '只支持.jpg .png .jpg 格式'
                    });
                    return false
                }
                const check = this.formData.liveImages.length < 4;
                if (this.formData.liveImages.length < 4) {
                    this.formData.liveImages.push(file);
                }
                if (!check) {
                    this.$Notice.warning({
                        title: '最多只能上传 4 张图片。'
                    });
                }

                return check;
            },
            //现场照片修正
            upPhoto: function () {
                //选中单条记录进行修改
                var ids = getSelectedRow('#jqGrid')
                this.formData.pmTicketItemId = ids;
                if (ids == null) {
                    return
                }
                this.imageModal1 = true;
            },
            end: function () {
                //批量完成
                var ids = getSelectedRows("#jqGrid");
                if (ids == null) {
                    return;
                }
                confirm('确定完成选中的记录？', function () {
                    Ajax.request({
                        url: "../devplangc/temTicketItems/batchEnd",
                        params: JSON.stringify({'ids': ids}),
                        type: "POST",
                        contentType: "application/json",
                        successCallback: function () {
                            alert('操作成功', function (index) {
                                layer.closeAll();
                                vm.reload();
                            });
                        }
                    });
                });
            },
            reload: function (event) {
                var page = $("#jqGrid").jqGrid('getGridParam', 'page');
                $("#jqGrid").jqGrid('setGridParam', {
                    search: true,
                    postData: {},
                    page: page
                }).trigger("reloadGrid", [{page: 1}]);
            },
            loadMaintenanceTicketLiveImage: function (itemId) {
                let _this = this;
                // 获取维护工单现场照片
                Ajax.request({
                    url: "../devplangc/" + itemId + "/liveImages",
                    type: "POST",
                    successCallback: function (r) {
                        if (r.code == 0) {
                            _this.liveImageList = r.liveImageList;
                            if (_this.liveImageList.length == 0) {
                                iview.Message.warning('暂未上传现场照片！');
                            } else {
                                _this.liveImageModal = true;
                            }
                        }
                    }
                });
            }
        }
    })
</script>
<style>
    .divs {
        list-style: none;
    }

    .divs :hover {
        background-color: #eaebee;
    }
</style>
</body>
</html>
